<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>MyTest</title>
    <script src="../js/myScript.js" type="text/javascript">
    </script>

</head>

<body>
<p id="para1">This is my Test Demo!</p>
<button type="button" onclick="myFunction()">Click It</button>

<!--the param in myFunction1() use low word-->
<button type="button" onclick="myFunction1('hello', 'zhang')">CLICK!</button>
<br/>
<button type="button" onclick="message()" style="width: 100%;margin-top: 5%;">showMessage</button>

<hr/>
<div style="background-color:beige ;padding: 2%;">
    <p>Input a number between 5 and 10! </p>
    <input type="text" name="num_input" id="num_input" value=""/>
    <button type="button" onclick="throwTest()">Input Test Number</button>
    <p id="error_hint"></p>
</div>

<hr/>

<form style="background-color: aquamarine;" name="myForm" action="testForm.html" onsubmit="return formsTest()">
    First name:
    <input type="text" name="fname"/>
    <input type="submit" value="Submit"/>
    <input type="text" name="username" value="zhangsan"/>
    <input type="text" name="address" value="beijing"/>
</form>

<hr/>
<div style="background-color: blanchedalmond;">
    <p id="jsonDemo1" style="background-color: blueviolet;">aaa</p>
    <p id="jsonDemo2" style="background-color: red;">aaa</p>
    <p id="jsonDemo3" style="background-color: burlywood;">aaa</p>
    <p id="jsonDemo4" style="background-color: skyblue;">aaa</p>
    <button type="button" id="json_btn" onclick="testJson()" style="margin: 5%;">JsonTest</button>
</div>
<hr/>

<div style="background-color: silver;">
    <button type="button" onclick="voidTest()" style="margin: 5%;">voidTest</button>
    <br/>
    <a href="javascript:void(0)">void(0), Click</a>
    <br/>
    <a href="javascript:void(alert(' LALALALA '))">void(func), Click</a>
    <br/>
    <button type="button" onclick="funcTest()" style="margin: 5%;">funcTest</button>
</div>

<hr/>
<div style="background-color: navajowhite;">
    <button id="btn_id" type="button" onclick="funcTest()" style="margin: 2%;">funcTest</button>
    <p id="func_id">aaaaaa</p>
</div>

<hr/>
<button id="myBtn" type="button" style="width: 95%;height: 10%;margin: 5%;" onclick="addEventTest()">addTest</button>
<button id="paramBtn" type="button" style="width: 95%;height: 10%;margin: 5%;" onclick="paramAddEventTest()">paramTest
</button>
<p id="show_text"></p>
</body>

</html>